<!-- 首页 -->
<template>
	<view>
		<cu-custom :isBack="false"><block slot="content">坦白局大挑战</block></cu-custom> 
		<view class="page" :style=" 'height: '+pageHeight+''">
			<view class="home" @click="changeUser">换一个人</view>
			<view class="user-box" @click="userCenter(user)">
				<u-avatar :src="user.avatar" :size="110"></u-avatar>
			</view>
			<view class="room-box">
				<view class="header">
					<image src="../../static/titbg.png"></image>
					<view class="title">你可以问我任何问题</view>
				</view>
				<scroll-view :style=" 'height: '+swiperHeight+''" class="scroll-view" scroll-y scroll-with-animation @scrolltolower="onreachBottom">
					<view class="chat-box">
						<block v-for="(item, index) in dataList" :key="index">
							<view class="message friend">
								<view class="avatar-box">
									<u-avatar :src="item.avatar" class="avatar" :size="90"></u-avatar>
								</view>
								<view class="content-box">
									<view class="content-span">
										<view class="content">{{item.message}}</view>
									</view>
									<view class="reply-span" v-if="item.replyStatus == '1' && item.my == false">
										<view class="reply-text">已回复</view>
									</view>
								</view>
							</view>
							<block v-for="(other, index2) in item.replyList" :key="index2">
								<view class="message self">
									<view class="content">{{other.message}}</view>
									<u-avatar :src="other.avatar" class="avatar" :size="90"></u-avatar>
								</view> 
							</block>
						</block>
						<!-- <view class="message friend">
							<view class="avatar-box">
								<u-avatar class="avatar" :size="90"></u-avatar>
							</view>
							<view class="content-box">
								<view class="content-span">
									<view class="content">如果我追你，成功率多少</view>
								</view>
								<view class="reply-span">
									<view class="reply-text">已回复</view>
								</view>
							</view>
						</view>
						<view class="message friend">
							<view class="avatar-box" @click="showUser">
								<u-avatar :src="avatar" class="avatar" :size="90"></u-avatar>
							</view>
							<view class="content-box">
								<view class="content-span">
									<view class="content">如果我追你，成功率多少</view>
								</view>
								<view class="reply-span"></view>
							</view>
						</view>
						<view class="message self">
							<view class="content">你好</view>
							<u-avatar :src="avatar" class="avatar" :size="90"></u-avatar>
						</view>
						
						<view class="message friend">
							<view class="avatar-box" @click="showUser">
								<u-avatar :src="avatar" class="avatar" :size="90"></u-avatar>
							</view>
							<view class="content-box">
								<view class="content-span">
									<view class="content">如果我追你，成功率多少</view>
								</view>
								<view class="reply-span"></view>
							</view>
						</view>
						<view class="message self">
							<view class="content">你好</view>
							<u-avatar :src="avatar" class="avatar" :size="90"></u-avatar>
						</view>
						<view class="message friend">
							<view class="avatar-box" @click="showUser">
								<u-avatar :src="avatar" class="avatar" :size="90"></u-avatar>
							</view>
							<view class="content-box">
								<view class="content-span">
									<view class="content">如果我追你，成功率多少</view>
								</view>
								<view class="reply-span"></view>
							</view>
						</view>
						<view class="message self">
							<view class="content">你好</view>
							<u-avatar :src="avatar" class="avatar" :size="90"></u-avatar>
						</view>
						<view class="message friend">
							<view class="avatar-box" @click="showUser">
								<u-avatar :src="avatar" class="avatar" :size="90"></u-avatar>
							</view>
							<view class="content-box">
								<view class="content-span">
									<view class="content">如果我追你，成功率多少</view>
								</view>
								<view class="reply-span"></view>
							</view>
						</view>
						<view class="message self">
							<view class="content">你好</view>
							<u-avatar :src="avatar" class="avatar" :size="90"></u-avatar>
						</view>
						<view class="message friend">
							<view class="avatar-box" @click="showUser">
								<u-avatar :src="avatar" class="avatar" :size="90"></u-avatar>
							</view>
							<view class="content-box">
								<view class="content-span">
									<view class="content">如果我追你，成功率多少</view>
								</view>
								<view class="reply-span"></view>
							</view>
						</view>
						<view class="message self">
							<view class="content">你好</view>
							<u-avatar :src="avatar" class="avatar" :size="90"></u-avatar>
						</view>
						<view class="message friend">
							<view class="avatar-box" @click="showUser">
								<u-avatar :src="avatar" class="avatar" :size="90"></u-avatar>
							</view>
							<view class="content-box">
								<view class="content-span">
									<view class="content">如果我追你，成功率多少</view>
								</view>
								<view class="reply-span"></view>
							</view>
						</view>
						<view class="message self">
							<view class="content">你好</view>
							<u-avatar :src="avatar" class="avatar" :size="90"></u-avatar>
						</view>
						<view class="message friend">
							<view class="avatar-box" @click="showUser">
								<u-avatar :src="avatar" class="avatar" :size="90"></u-avatar>
							</view>
							<view class="content-box">
								<view class="content-span">
									<view class="content">如果我追你，成功率多少</view>
								</view>
								<view class="reply-span"></view>
							</view>
						</view>
						<view class="message self">
							<view class="content">你好</view>
							<u-avatar :src="avatar" class="avatar" :size="90"></u-avatar>
						</view> -->
						
					</view>
				</scroll-view>
			</view>
			<view class="btn-box">
				<view class="btn all" @click="qsk">向TA提问</view>
				<view class="btn play" @click="play">我也要玩</view>
			</view>
			
			<u-mask :show="show3" @click="show3 = false">
				<view class="qsk-mask">
					<view class="rect" @tap.stop>
						<view class="msg-box">
							<view class="textarea">
								<textarea disabled v-model="question" maxlength="200" placeholder="请选择你的提问。我们提倡真诚友好的内容，严禁涉黄暴涉症内容，坚决反对诽谤、辱骂、骚扰他人。"></textarea>
							</view>
							<scroll-view class="scroll-qsk" scroll-y scroll-with-animation>
								<view class="qsk-box" v-for="(qsk, index) in qskList" :key="index">
									<view class="qsk" @click="qskTab(qsk)">{{qsk}}</view>
								</view>
							</scroll-view>
						</view>
						<view class="send-btn" @click="sendQes">发送</view>
					</view>
				</view>
			</u-mask> 
			
			<u-modal :show-cancel-button="false" confirm-text="好哒" confirm-color="#5aaeb0" mask-close-able v-model="show2">
				<view class="pay-mask">
					<rich-text :nodes="content"></rich-text>
				</view>
			</u-modal>
			
			<user-auth :isJump="false"></user-auth>
		</view>
	</view>
</template>

<script>
export default {
	components: { 
		
	},
	props:{
		
	},
	data() {
		return {
			my: 'false',
			show: false,
			show2: false,
			show3: false,
			question: '',
			content: '支付1元查看该条匿名者<br>看看是谁在偷偷向你提问',
			qskList: [
				'你第一次是什么时候',
				'我可以和你一起打王者吗',
				'我可以跟你表白吗',
				'网恋你会奔现吗',
				'你觉得网恋多久可以奔现',
				'你相信爱情吗',
				'你毕业了吗',
				'我们可以互换照片吗',
				'如果我追你，成功率多少',
				'你为什么还是单身',
				'我暗恋你很久了你知道吗',
				'2024，你的心愿是什么',
				'你觉得我怎么做才能撩到你',
				'2023，你最大的收获是什么',
				'你最割舍不下的人是谁',
				'你觉得自己渣吗',
				'你对另一半的要求是什么',
				'你谈过几次恋爱',
				'你现在有对象吗',
				'我可以追你吗',
				'我们可以做三天情侣吗',
				'你觉得自己是恋爱脑吗',
			],
			userId: 11737042,
			user: {
				
			},
			current: 1,
			pageSize: 10,
			isEnd: false,
			dataList: [],
		};
	},
	created() {
		this.query();
	},
	computed: {
	  pageHeight: {
	    get() {
	      let that = this;
	      return ' calc( 100vh - 100rpx - '+ this.CustomBar + 'px)';
	    },
	    set(v) {}
	  },
	  swiperHeight: {
	    get() {
	      let that = this;
	      return ' calc( 100vh - 400rpx - 44px - ' + that.CustomBar + 'px )';
	    },
	    set(v) {}
	  },
	},
	methods: {
		load() {
			this.loadmore(); 
		},
		async loadmore() {
			if(this.isEnd){
				return;
			}
			var res = await this.getDataList();
			this.dataList = this.dataList.concat(res.rows);
		},
		query() {
			this.userId = 11737042;
			this.current = 1;
			this.isEnd = false;
			this.loadquery();
		},
		async loadquery() {
			var res = await this.getDataList();
			this.dataList = res.rows;
		},
		async getDataList() {
			var sendUserId = uni.getStorageSync("userId");
			var data = await this.$u.get('/wq/question/list', {
				userId: this.userId, 
				sendUserId: sendUserId,
				pageNum: this.current,
				pageSize: this.pageSize,
			});
			var res = data.page;
			this.user = data.user;
			this.userId = this.user.userId;
			var totalPage = Math.ceil(res.total/this.pageSize);
			this.pages = totalPage;
			this.current ++;
			if(this.current > this.pages){
				this.isEnd = true;
			}
			return res;
		},
		del() {
			uni.showModal({
				title: '提示',
				content: '此条提问将被永久删除，确定删除吗？',
				showCancel: true,
				success: function(res) {
					
				},
			});
		},
		reply() {
			this.show = true;
		},
		showUser() {
			this.show2 = true;
		},
		qsk() {
			this.show3 = true;
		},
		play() {
			this.judgeLogin(() => {
				this.$u.route({
					url: 'pages/question/play',
				}); 
			});
		},
		qskTab(e) {
			this.question = e;
		},
		sendQuestion() {
			this.judgeLogin(() => {
				if(!this.question){
					this.$u.toast('请输入内容');
					return;
				}
				this.$u.post('/wq/question/add',{
					userId: this.user.userId,
					message: this.question,
				}).then(res => {
					this.show3 = false;
					this.question = '';
					this.query();
				});
			});
		},
		sendPlay() {
			var _this = this;
			_this.$u.get('/system/user/getTmplId',{
				appId : _this.website.appId
			}).then(res => {
				var tmplIds = res.tmplIds
				var tmplId = tmplIds[0];
				wx.getSetting({
				  withSubscriptions: true,
				  success(res) {
					console.log(res)
					if (res.subscriptionsSetting && res.subscriptionsSetting.mainSwitch) {
					  if (res.subscriptionsSetting.itemSettings && res.subscriptionsSetting.itemSettings[tmplId]) {
						let item = res.subscriptionsSetting.itemSettings[tmplId]
						if (item == "reject") {
						  uni.showModal({
						  	title: '温馨提示',
						  	content: '请打开通知管理里面的消息提醒',
						  	showCancel: false,
						  	success: function(res) {
						  		uni.openSetting({
								  success(res) {
									console.log(res.authSetting)
								  },
								  fail(err) {
									console.error(err);
								  }
								});
						  	}
						  });
						} else if (item == "accept") {
						  uni.requestSubscribeMessage({
						  	//数组，最多放三个订阅模板的ID
						  	tmplIds: tmplIds,
						  	success: function(res) {
						  		var code = res[tmplIds[0]];
						  		if('reject' == code){
						  			_this.$u.toast('请点击允许订阅消息');
						  		}else{
									_this.play();
									return;
						  		}
						  	},
						  	fail: function(res) {
						  		console.log(res)
						  	},
						  	complete: (res) => {
						  		
						  	}
						  });
						} else if (item == "ban") {
						  uni.showModal({
						  	title: '温馨提示',
						  	content: '请在设置打开订阅消息开关',
						  	showCancel: false,
						  	success: function(res) {
						  		
						  	}
						  });
						}
					  }else{
						uni.requestSubscribeMessage({
							//数组，最多放三个订阅模板的ID
							tmplIds: tmplIds,
							success: function(res) {
								var code = res[tmplIds[0]];
								if('reject' == code){
									_this.$u.toast('请点击允许订阅消息');
								}else{
									_this.play();
									return;
								}
							},
							fail: function(res) {
								console.log(res)
							},
							complete: (res) => {
								
							}
						});
					  }
					} else {
					  uni.showModal({
					  	title: '温馨提示',
					  	content: '请在设置打开通知管理开关',
					  	showCancel: false,
					  	success: function(res) {
					  		uni.openSetting({
							  success(res) {
								console.log(res.authSetting)
							  },
							  fail(err) {
								console.error(err);
							  }
							});
					  	}
					  });
					}
				  }
				});
				
			})
		},
		sendQes() {
			var _this = this;
			_this.$u.get('/system/user/getTmplId',{
				appId : _this.website.appId
			}).then(res => {
				var tmplIds = res.tmplIds
				var tmplId = tmplIds[0];
				wx.getSetting({
				  withSubscriptions: true,
				  success(res) {
					console.log(res)
					if (res.subscriptionsSetting && res.subscriptionsSetting.mainSwitch) {
					  if (res.subscriptionsSetting.itemSettings && res.subscriptionsSetting.itemSettings[tmplId]) {
						let item = res.subscriptionsSetting.itemSettings[tmplId]
						if (item == "reject") {
						  uni.showModal({
						  	title: '温馨提示',
						  	content: '请打开通知管理里面的消息提醒',
						  	showCancel: false,
						  	success: function(res) {
						  		uni.openSetting({
								  success(res) {
									console.log(res.authSetting)
								  },
								  fail(err) {
									console.error(err);
								  }
								});
						  	}
						  });
						} else if (item == "accept") {
						  uni.requestSubscribeMessage({
						  	//数组，最多放三个订阅模板的ID
						  	tmplIds: tmplIds,
						  	success: function(res) {
						  		var code = res[tmplIds[0]];
						  		if('reject' == code){
						  			_this.$u.toast('请点击允许订阅消息');
						  		}else{
									_this.sendQuestion();
									return;
						  		}
						  	},
						  	fail: function(res) {
						  		console.log(res)
						  	},
						  	complete: (res) => {
						  		
						  	}
						  });
						} else if (item == "ban") {
						  uni.showModal({
						  	title: '温馨提示',
						  	content: '请在设置打开订阅消息开关',
						  	showCancel: false,
						  	success: function(res) {
						  		
						  	}
						  });
						}
					  }else{
						uni.requestSubscribeMessage({
							//数组，最多放三个订阅模板的ID
							tmplIds: tmplIds,
							success: function(res) {
								var code = res[tmplIds[0]];
								if('reject' == code){
									_this.$u.toast('请点击允许订阅消息');
								}else{
									_this.sendQuestion();
									return;
								}
							},
							fail: function(res) {
								console.log(res)
							},
							complete: (res) => {
								
							}
						});
					  }
					} else {
					  uni.showModal({
					  	title: '温馨提示',
					  	content: '请在设置打开通知管理开关',
					  	showCancel: false,
					  	success: function(res) {
					  		uni.openSetting({
							  success(res) {
								console.log(res.authSetting)
							  },
							  fail(err) {
								console.error(err);
							  }
							});
					  	}
					  });
					}
				  }
				});
				
			})
		},
		changeUser() {
			this.judgeLogin(() => {
				this.$u.get('/system/user/getRandomUser').then(res => {
					this.userId = res.data.userId;
					this.query();
				});
			});
		},
		home() {
			this.judgeLogin(() => {
				uni.reLaunch({
				  url: '/pages/index'
				});
			});
		},
		userCenter(e) {
			this.judgeLogin(() => {
				this.$u.route({
					url: 'packgeMine/pages/center/index',
					params: {
						userId: e.userId,
					}
				});
			});
		},
		onreachBottom(e) {
			this.load();
			console.log('到底了');
		},
		
	}
}; 
</script>

<style lang="scss" scoped>
	.page {
		padding: 15px;
		background-color: #5ac9c0;
		height: 100%;
		left: 0;
		right: 0;
		padding-top: 0;
	}
	.home {
		background-color: #ddd;
		position: absolute;
		right: 0;
		top: 250rpx;
		font-size: 22rpx;
		padding: 8px 15px;
		border-top-left-radius: 20px;
		border-bottom-left-radius: 20px;
		padding-right: 10px;
		color: #3b9fa1;
	}
	.user-box {
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 15px;
		padding: 20px 0;
		
		.avatar {
			border-radius: 100%;
			width: 118rpx;
			height: 118rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: #ddd;
		}
	}
	.scroll-view {
		box-sizing: border-box;
		background-color: #d3f0eb;
		border-radius: 6px;
		padding-top: 5px;
		padding-bottom: 5px;
	}
	
	.room-box {
		position: relative;
		display: flex;
		justify-content: center;
		
		.header {
			position: absolute;
			top: -17px;
			z-index: 9;
			display: flex;
			justify-content: center;
			align-items: center;
			
			image {
				height: 40px;
				width: 260px;
			}
			
			.title {
				position: absolute;
				font-size: 20px;
				color: #fff;
			}
		}
		.chat-box {
			background-color: #d3f0eb;
			padding: 10px;
			padding-left: 5px;
			padding-top: 35px;
			border-radius: 6px;
		}
	}
	.message {
		display: flex;
		align-items: flex-start;
		margin-bottom: 30rpx;
		
		.avatar-box {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 140rpx;
		}
		.avatar {
			//margin-right: 30rpx;
		}
		.nickname {
			margin-top: 5px;
			font-size: 22rpx;
			color: #5aaeb0;
		}
		.content-span {
			position: relative;
			flex: 1;
			max-width: 400rpx;
			
			.close-btn {
				position: absolute;
				top: -6px;
				right: -6px;
				background-color: #ffffff9c;
				border-radius: 100%;
				font-size: -29px;
				padding: 5px;
				width: 30rpx;
				height: 30rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
		}
		.content-box {
			display: flex;
			align-items: center;
			flex: 1;
			
			.reply-span {
				margin-left: 10px;
				width: 90rpx;
				font-size: 24rpx;
				color: #909399;
				
				.reply-btn {
					background-color: #5aaeb0;
					color: #fff;
					font-size: 22rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					padding: 5px 0;
					border-radius: 5px;
				}
			}
		}
		.content {
			min-height: 80rpx;
			max-width: 400rpx;
			box-sizing: border-box;
			font-size: 28rpx;
			line-height: 1.3;
			padding: 20rpx;
			border-radius: 10rpx;
			background: #fff;
			image {
				width: 200rpx;
			}
		}
		&.self {
			justify-content: flex-end;
			.avatar {
				margin: 0 0 0 30rpx;
			}
			.content {
				position: relative;
				&::after {
					position: absolute;
					content: '';
					width: 0;
					height: 0;
					border: 16rpx solid transparent;
					border-left: 16rpx solid #fff;
					right: -28rpx;
					top: 24rpx;
				}
			}
		}
		&.friend {
			.content {
				position: relative;
				&::after {
					position: absolute;
					content: '';
					width: 0;
					height: 0;
					border: 16rpx solid transparent;
					border-right: 16rpx solid #fff;
					left: -28rpx;
					top: 24rpx;
				}
			}
		}
	}
	
	.btn-box {
		display: flex;
		justify-content: space-between;
		padding: 15px;
		
		.btn {
			background-color: #686898;
			height: 35px;
			color: #fff;
			font-size: 28rpx;
			border-radius: 5px;
			padding: 0 16px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		
		.all {
			background-color: #fee0a5;
			color: #ed6c3d;
		}
		
		.play {
			color: #3b9fa1;
			background-color: #def1ed;
		}
	}
	
	.tip {
		font-size: 22rpx;
		color: red;
		display: flex;
		justify-content: center;
	}
	
	
	.send-mask {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		padding: 0 40px;
		
		.rect {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 100%;
		}
		
		.msg-box {
			background-color: #fff;
			border-radius: 3px;
			width: 100%;
			margin-bottom: 15px;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 15px 10px;
			
			.textarea {
				width: 100%;
				overflow: hidden;
			}
			
			.textarea textarea {
				width: 100%;
				font-size: 14px;
				border: 1px #eee dashed;
				box-sizing: border-box;
				float: left;
				color: #333;
				line-height: 1.6;
				height: 110px;
				padding: 5px 10px;
			}
		}
		
		.send-btn {
			height: 35px;
			width: 100px;
			font-size: 28rpx;
			border-radius: 5px;
			padding: 0 16px;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #fee0a5;
			color: #ed6c3d;
		}
	}
	
	.qsk-mask {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		padding: 0 40px;
		margin-top: 10px;
		
		.rect {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 100%;
		}
		
		.msg-box {
			background-color: #fff;
			border-radius: 3px;
			width: 100%;
			margin-bottom: 15px;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;
			padding: 15px 10px;
			
			.textarea {
				width: 100%;
				overflow: hidden;
				margin-bottom: 10px;
			}
			
			.textarea textarea {
				width: 100%;
				font-size: 14px;
				border: 1px #eee dashed;
				box-sizing: border-box;
				float: left;
				color: #333;
				line-height: 1.6;
				height: 80px;
				padding: 5px 10px;
			}
			
			.scroll-qsk {
				height: 210px;
				
				.qsk {
					font-size: 28rpx;
					padding-top: 10px;
				}
			}
		}
		
		.send-btn {
			height: 35px;
			width: 100px;
			font-size: 28rpx;
			border-radius: 5px;
			padding: 0 16px;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #fee0a5;
			color: #ed6c3d;
		}
	}
	
	.pay-mask {
		padding: 20px;
		display: flex;
		justify-content: center;
		font-size: 24rpx;
		color: #5aaeb0;
		line-height: 20px;
	}
	
</style>
